<!--  frame 我的收藏 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>我的收藏</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/my/collect/collect.wxss */

	.warp {
	  padding: .30rem;
	}

	.section-item {
	  display: flex;
	  padding: .30rem;
	  background: #fff;
	  border-radius: .20rem;
	  border: 1px solid #eee;
	  margin-bottom: .20rem;
	}

	.product_img {
	  width: 1.80rem;
	  height: 1.80rem;
	  border-radius: .10rem;
	  margin-right: .20rem;
	}

	.product {
	  flex: auto;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  height: 1.80rem;
	}

	.product_name {
	  font-size: .28rem;
	  color: #666;
	}

	.product_sku,.sold_num {
	  font-size: .24rem;
	  color: #999;
	}

	.product_b {
	  display: flex;
	  align-items: center;
	}

	.product_price {
	  flex: auto;
	  font-size: .32rem;
	  color: #ff502d;
	}

	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<div class="warp">
		  <div v-if="collection.length>0">
		    <div class="section" v-for="(item,index) in collection" :key="index">
		      <div class="section-item" @click="ProductDetail(item.id)" >
		        <image class="product_img" :src="item.image_center"></image>
		        <div class="product">
		          <div class="product_name">{{item.product_name}}</div>
		          <div class="product_b">
		            <div class="product_price">¥ {{item.price}}</div>
		            <div class="sold_num">{{item.sale_count}}已售</div>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		  <div v-if="collection.length==0" class="no-data">
			    <img src="../image/collect.png" alt="">
					<div class="">
						暂无收藏信息
					</div>
		  </div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			page: 1,
	    size: 99999,
	    noData:{
	      img: "../../images/nodata/collect.png",
	      title: "暂无收藏信息",
	      content: "快去将喜欢的商品收藏到这里吧！"
	    },
			collection: [],
		},
		mounted: function(){
				this.getData()
		},
		methods: {
			//打开商品详情页
			ProductDetail: function(id) {
			 api.openWin({name: 'commodity_detail',url: './commodity_detail.html',pageParam: {}})
			 localdata.set('productId',id)
			},
			//获取数据
						getData: function (loader){
							let param = {
								page: this.page,
				        size: this.size
							}
							AjaxSafe({
						   		url:"/xapp/product/collectionList",
						    	data:param,
						    	loader:loader,
								success: function(res) {
								    vm.collection = res.list
								},
								failed: function(err){
										alert("网络故障！");
								}
							});
						},
		},

	});
}

</script>
</html>
